<template>
  <van-tabbar
    v-model="active"
    active-color="#f66"
    :route="true"
    :placeholder="true"
  >
    <van-tabbar-item
      v-for="item in tabbarList"
      :key="item.title"
      :to="item.url"
    >
      {{ item.title }}
      <template #icon>
        <span class="iconfont" :class="item.icon"></span>
      </template>
    </van-tabbar-item>
  </van-tabbar>
</template>

<script setup lang="ts">
import { ref } from "vue";

// 定义一个tabbar的数组
// 如果一个数据一定是不变的，或者这个数据不需要在页面上面显示的
// 那么就尽量不要用ref
const tabbarList = [
  {
    title: "首页",
    icon: "icon-shouye",
    url: "/home",
  },
  {
    title: "分类",
    icon: "icon-fenlei",
    url: "/classify",
  },
  {
    title: "购物车",
    icon: "icon-gouwuche",
    url: "/cart",
  },
  {
    title: "我的",
    icon: "icon-wode",
    url: "/mine",
  },
];

const active = ref<number>(0);
const handleChange = (active: number | string) => {
  console.log(active);
};
</script>
